---
import { type CollectionEntry, getCollection, getEntry } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';
import { db, eq, Likes } from 'astro:db';
import { Like, LikeWithActionState } from '../../components/Like';

export const prerender = false;

export async function getStaticPaths() {
	const posts = await getCollection('blog');
	return posts.map((post) => ({
		params: { slug: post.slug },
		props: post,
	}));
}

type Props = CollectionEntry<'blog'>;

const post = await getEntry('blog', Astro.params.slug)!;
const { Content } = await post.render();

const likesRes = await db.select().from(Likes).where(eq(Likes.postId, post.id)).get()!;
---

<BlogPost {...post.data}>
	<h2>Like</h2>
	{
		likesRes && (
			<Like postId={post.id} likes={likesRes.likes} label="likes-client" client:load />
			<Like postId={post.id} likes={likesRes.likes} label="likes-server" />
		)
	}

	<h2>Like with action state</h2>
	<LikeWithActionState postId={post.id} likes={10} label="likes-action-client" client:load />
	<LikeWithActionState postId={post.id} likes={10} label="likes-action-server" />

	<Content />

</BlogPost>
